<template>
	<view class="upload-grid">
		<view class="upload-item" v-for="(item, index) in fileList" :key="index">
			<view class="">
				<u-image @tap="selectFile(index)" :border-radius="10" width="100%" :height="200" :src="$getImageUrl(item.PhotoUrl)"></u-image>
				<view class="u-flex-col u-text-center u-font-12"><u-input :disabled="index < minUpCount || !showAdd" class="u-m-t-10" :border="true" placeholder="请输入" v-model="item.Title" :height="60"></u-input></view>
			</view>
			
			<u-icon v-if="showDelete || index > minUpCount" @click="deleteFile(index)" name="close-circle" size="50" class="close-btn" color="red"></u-icon>
		</view>
		<view v-if="showAdd"  @tap="addPhoto" class="upload-item u-flex-col u-col-center u-row-center add">
			<u-icon name="plus" size="80"></u-icon>
		</view>

		<u-upload
			accept="all"
			style="display: none;"
			class="upload-item"
			ref="upload"
			:show-progress="false"
			:auto-upload="false"
			:file-list="fileList"
			@on-choose-complete="onFileChange"
			@on-remove="deleteFile"
			:upload-text="uploadText"
		></u-upload>
	</view>
</template>

<script>
export default {
	name: 'new-store-photo',
	props: {
		value: {
			type: [Array, String],
			default() {
				return [];
			}
		},
		maxCount: {
			type: Number,
			default: 99
		},
		uploadText: {
			type: String,
			default: '上传图片'
		},
		readonly: {
			type: Boolean,
			default: false
		},
		showAdd: {
			type: Boolean,
			default: true
		},
		showDelete: {
			type: Boolean,
			default: false
		},
		minUpCount: {
			type: Number,
			default: 3
		},
		defaultTitle: {
			type: String,
			default: '门店开户照片'
		},
		
	},

	data() {
		return {
			currentIndex: 0,
			fileList: [],
		};
	},

	created() {
		if(this.value && this.value.length > 0) {
			this.fileList = this.value;
		}
	},

	watch: {
		value(val) {
			console.log('value', val);
			if (val) {
				this.fileList = val;
			}
		}
	},

	methods: {
		selectFile(index) {
			
			if(!this.showAdd) {
				return false;
			}

			this.currentIndex = index;
			this.$refs.upload.selectFile();
		},
		
		addPhoto() {
			this.fileList.push({
				JumpUrl: "",
				ObjectId: 0,
				PhotoUrl: "",
				Title: this.defaultTitle,
				TypeId: 1
			})
		},

		onFileChange(list, name) {
			const file = list[list.length - 1].file;
			this.$fileUpload(file).then(res => {
				this.fileList[this.currentIndex].PhotoUrl = res.key;
				this.$emit('input', this.fileList);
				this.$emit('change', this.fileList);
			});
		},

		deleteFile(index) {
			uni.showModal({
				title: '提示',
				content: '您确定要删除此项吗？',
				success: res => {
					if (res.confirm) {
						this.fileList.splice(index, 1);
						this.$emit('input', this.fileList);
						this.$emit('change', this.fileList);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.upload-grid {
	display: grid;
	margin: 10rpx 30rpx;
	grid-template-columns: repeat(2, 1fr);
	// grid-template-rows: repeat(auto-fill, 260rpx);
	gap: 15rpx;

	grid-auto-rows: 310rpx;

	.upload-item {
		padding: 20rpx;
		border: 1px solid rgb(235, 236, 238);
		border-radius: 10rpx;
		box-sizing: border-box;
		position: relative;
		
		&.add {
			border-style: dashed;
		}
		
		.close-btn {
			position: absolute;
			top: -5px;
			right: -5px;
		}
	}
	

	.u-delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}

/deep/.u-list-item {
	margin: 0 !important;
}
</style>
